<template>
	<div class="special_topic">
		<div class="topic_manage" v-if="indexs===0">
			<h1>专题管理</h1>
			<div class="content">
				<el-tabs v-model="activeName">
					<el-tab-pane label="专题管理" name="1">
						<div class="groups">
							<p @click="switchG(0)" :class="{sel:groupTab===0}">专题目分组管理</p>
							<p @click="switchG(1)" :class="{sel:groupTab===1}">上下架</p>
						</div>
						<!-- 专题目分组管理 -->
						<div class="group_manage" v-if="groupTab===0">
							<div class="group_border">
								<div class="border_left">
									<div class="advice">
										<img src="../../../assets/images/manage/help.png" alt="" />
										<span>合理设置专题分类能方便进行及时的管理</span>
									</div>
									<div class="group_name">分组名称&nbsp;&nbsp;{{ groupName }}</div>
									<div class="set_selected">
										<div class="sort_way">
											<span>排序方式</span>
											<el-select v-model="value1" placeholder="请选择" size="small" style="width:180px;">
												<el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</div>
										<div class="format">
											<span>设置分组版式</span>
											<el-select v-model="value2" placeholder="请选择" size="small" style="width:180px;">
												<el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</div>
									</div>
									<div class="data_lists">
										<div class="data_list" v-for="(item,index) in allData" :key="index" @mouseover="overs(item.id)" @mouseout="outs(item.id)">
											<div class="imgs">
												<img src="../../../assets/images/abao/banner.jpg" alt="" />
												<p>{{ item.name }}</p>
											</div>
											<div class="line"></div>
											<div class="hovers" v-if="dataIndex===item.id">
												<div class="buttons">
													<button @click="edit(item.id)">编辑</button>
													<button @click="enter(item.id)">进入</button>
													<button @click="deletes(item.id)">删除</button>
												</div>
											</div>
										</div>
										<div class="no_datas" v-if="noData">
											<img src="../../../assets/images/manage/sameCity/noData.png" alt="" />
											<p>没有筛选出符合条件的信息</p>
										</div>
									</div>
								</div>
								<div class="border_right">
									<div class="grouping_list">
										<p v-for="(item,index) in groupData" :key="index" :class="{sel:groupIndex===index}" @click="selected(index,item.name)">{{ item.name }}({{ item.sum }})</p>
										<el-popover title="分组名称" width="200" v-model="visible">
											<el-input v-model.trim="input1" placeholder="请输入分组名" size="mini" clearable></el-input>
											<div class="btns" style="display:flex;margin-top:10px;">
												<el-button type="primary" size="mini" @click.native="ensures">确定</el-button>
												<el-button size="mini" @click.native="visible=false">取消</el-button>
											</div>
											<el-button slot="reference" style="margin:8px 0 0 8px;"><span style="font-size:16px;color:#b0b0b0;margin-right:5px;">+</span>新建分组</el-button>
										</el-popover>
									</div>
								</div>
							</div>
						</div>
						<!-- 上下架 -->
						<div class="shelf" v-if="groupTab===1">
							<el-tabs v-model="activeName2" type="card">
								<el-tab-pane label="已上架专题" name="1">
									<div class="btn">
										<button :class="{sel:multipleSelection1.length>0}">下架</button>
									</div>
									<div class="table1">
										<el-table border ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange1" key="table1">
											<el-table-column type="selection" width="40">
											</el-table-column>
											<el-table-column label="商品">
												<template slot-scope="scope">{{ scope.row.name }}</template>
											</el-table-column>
											<el-table-column prop="price" label="价格" sortable>
											</el-table-column>
											<el-table-column prop="stock" label="库存" sortable>
											</el-table-column>
											<el-table-column prop="sale" label="总销量" sortable>
											</el-table-column>
											<el-table-column prop="day" label="累计上架天数" sortable>
											</el-table-column>
											<el-table-column label="操作">
												<template slot-scope="scope">
													<span>下架</span>
												</template>
											</el-table-column>
										</el-table>
										<el-pagination style="margin-top:20px;" @size-change="handleSizeChange1" background @current-change="handleCurrentChange1" :current-page="page1" :page-sizes="[6,8,10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableData1.length">
										</el-pagination>
									</div>
								</el-tab-pane>
								<el-tab-pane label="未上架专题" name="2">
									<div class="btn">
										<button :class="{sel:multipleSelection2.length>0}">上架</button>
										<button :class="{sel:multipleSelection2.length>0}">删除</button>
									</div>
									<div class="table1">
										<el-table border ref="multipleTable" :data="tableData2" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange2" key="table2">
											<el-table-column type="selection" width="40">
											</el-table-column>
											<el-table-column label="商品">
												<template slot-scope="scope">{{ scope.row.name }}</template>
											</el-table-column>
											<el-table-column prop="price" label="价格" sortable>
											</el-table-column>
											<el-table-column prop="stock" label="库存" sortable>
											</el-table-column>
											<el-table-column prop="sale" label="总销量" sortable>
											</el-table-column>
											<el-table-column prop="day" label="累计上架天数" sortable>
											</el-table-column>
											<el-table-column label="操作">
												<template slot-scope="scope">
													<span>上架</span>
												</template>
											</el-table-column>
										</el-table>
										<el-pagination style="margin-top:20px;" @size-change="handleSizeChange2" background @current-change="handleCurrentChange2" :current-page="page2" :page-sizes="[6,8,10]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="tableData2.length">
										</el-pagination>
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
					</el-tab-pane>
					<el-tab-pane label="添加专题" name="2">
						<div class="add_topic">
							<div class="common">
								<h5>专题名称：</h5>
								<el-input :class="{reds:isRed1}" placeholder="请输入专题名称" v-model.trim="input2" clearable>
								</el-input>
							</div>
							<div class="common">
								<h5>所属分组：</h5>
								<el-select :class="{reds:isRed2}" v-model="value3" placeholder="请选择">
									<el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<el-popover title="分组名称" width="200" v-model="visible_1">
									<el-input v-model.trim="input1_1" placeholder="请输入分组名" size="mini" clearable></el-input>
									<div class="btns" style="display:flex;margin-top:10px;">
										<el-button type="primary" size="mini" @click.native="ensures_1">确定</el-button>
										<el-button size="mini" @click.native="visible_1=false">取消</el-button>
									</div>
									<el-button slot="reference" style="margin-left:38px;border:none;color:#0099e9;">新建分组</el-button>
								</el-popover>
							</div>
							<div class="common">
								<h5>分组版式：</h5>
								<el-select :class="{reds:isRed3}" v-model="value4" placeholder="请选择">
									<el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<h5 style="margin-left:38px;">专题版式：</h5>
								<el-select :class="{reds:isRed4}" v-model="value5" placeholder="请选择">
									<el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<div class="common covers" v-loading="loading1">
								<h5>专题封面：</h5>
								<div class="up_img" @click.stop="goUpload1" :class="{reds:isRed5}">
									<div class="up_img_border" v-if="imgUrl1.length===0">
										<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload.png" alt="" />
										<span>专题封面</span>
										<p>不同的分组版是封面尺寸不同</p>
										<p>选择分组版式后，根据建议尺寸设置</p>
									</div>
									<div class="up_img_border" style="border:none;" v-if="imgUrl1.length>0">
										<img class="have_up_img" :src="imgUrl1" alt="" />
									</div>
									<input type="file" @change="onFileChange1" style="display:none;" id="upfile1">
								</div>
								<span>建议尺寸:500*325,图片小于4M</span>
							</div>
							<div class="common banners" v-loading="loading2">
								<h5>专题横幅：</h5>
								<div class="up_img" @click.stop="goUpload2" :class="{reds:isRed6}">
									<div class="up_img_border" v-if="imgUrl2.length===0">
										<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload.png" alt="" />
										<span>专题横幅</span>
										<p>不同的专题版式横幅尺寸不同</p>
										<p>选择专题版式后，根据建议尺寸设置</p>
									</div>
									<div class="up_img_border" style="border:none;" v-if="imgUrl2.length>0">
										<img class="have_up_img" :src="imgUrl2" alt="" />
									</div>
									<input type="file" @change="onFileChange2" style="display:none;" id="upfile2">
								</div>
							</div>
							<h6>建议尺寸:900*525,图片小于4M</h6>
							<div class="common">
								<h5>专题描述：</h5>
								<el-input :class="{reds:isRed7}" type="textarea" :rows="5" placeholder="请输入专题描述（100以内字符）" :maxlength="100" v-model="textarea1">
								</el-input>
							</div>
							<div class="btns">
								<button @click="cancels">取消</button>
								<button @click="submits">提交</button>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 编辑 -->
			<el-dialog title="编辑专题" :visible.sync="dialogVisible1" width="55%" :close-on-click-modal="false" top="15px">
				<div class="add_topic" style="padding-top:0;">
					<div class="common" style="margin-top:0;">
						<h5>专题名称：</h5>
						<el-input :class="{reds:isRed1_e}" placeholder="请输入专题名称" v-model.trim="input2_e" clearable>
						</el-input>
					</div>
					<div class="common">
						<h5>所属分组：</h5>
						<el-select :class="{reds:isRed2_e}" v-model="value3_e" placeholder="请选择">
							<el-option v-for="item in option3_e" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-popover title="分组名称" width="200" v-model="visible_1_e">
							<el-input v-model.trim="input1_1_e" placeholder="请输入分组名" size="mini" clearable></el-input>
							<div class="btns" style="display:flex;margin-top:10px;">
								<el-button type="primary" size="mini" @click.native="ensures_1_e">确定</el-button>
								<el-button size="mini" @click.native="visible_1_e=false">取消</el-button>
							</div>
							<el-button slot="reference" style="margin-left:38px;border:none;color:#0099e9;">新建分组</el-button>
						</el-popover>
					</div>
					<div class="common">
						<h5>分组版式：</h5>
						<el-select :class="{reds:isRed3_e}" v-model="value4_e" placeholder="请选择">
							<el-option v-for="item in option4_e" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<h5 style="margin-left:38px;">专题版式：</h5>
						<el-select :class="{reds:isRed4_e}" v-model="value5_e" placeholder="请选择">
							<el-option v-for="item in option5_e" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="common covers" v-loading="loading1_e">
						<h5>专题封面：</h5>
						<div class="up_img" @click.stop="goUpload1_e" :class="{reds:isRed5_e}">
							<div class="up_img_border" v-if="imgUrl1_e.length===0">
								<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload.png" alt="" />
								<span>专题封面</span>
								<p>不同的分组版是封面尺寸不同</p>
								<p>选择分组版式后，根据建议尺寸设置</p>
							</div>
							<div class="up_img_border" style="border:none;" v-if="imgUrl1_e.length>0">
								<img class="have_up_img" :src="imgUrl1_e" alt="" />
							</div>
							<input type="file" @change="onFileChange1_e" style="display:none;" id="upfile1_e">
						</div>
						<span>建议尺寸:500*325,图片小于4M</span>
					</div>
					<div class="common banners" v-loading="loading2_e">
						<h5>专题横幅：</h5>
						<div class="up_img" @click.stop="goUpload2_e" :class="{reds:isRed6_e}">
							<div class="up_img_border" v-if="imgUrl2_e.length===0">
								<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload.png" alt="" />
								<span>专题横幅</span>
								<p>不同的专题版式横幅尺寸不同</p>
								<p>选择专题版式后，根据建议尺寸设置</p>
							</div>
							<div class="up_img_border" style="border:none;" v-if="imgUrl2_e.length>0">
								<img class="have_up_img" :src="imgUrl2_e" alt="" />
							</div>
							<input type="file" @change="onFileChange2_e" style="display:none;" id="upfile2_e">
						</div>
					</div>
					<h6>建议尺寸:900*525,图片小于4M</h6>
					<div class="common">
						<h5>专题描述：</h5>
						<el-input :class="{reds:isRed7_e}" type="textarea" :rows="5" placeholder="请输入专题描述（100以内字符）" :maxlength="100" v-model="textarea1_e">
						</el-input>
					</div>
					<div class="btns">
						<button @click="cancels_e">取消</button>
						<button @click="submits_e">提交</button>
					</div>
				</div>
			</el-dialog>
		</div>
		<!-- 专题详情 -->
		<div class="topic_detail" v-if="indexs===1">
			<div class="detail_name">
				<h2>专题名：<span>清明过后请远离这两个人，不管你是谁...</span></h2>
				<p @click="indexs=0">返回</p>
			</div>
			<div class="detail_conditions">
				<div class="group_name">分组名称&nbsp;&nbsp;{{ groupName }}</div>
				<div class="detail_condition">
					<div class="sort_way">
						<span>专题排序</span>
						<el-select v-model="value1_d" placeholder="请选择" size="small" style="width:180px;">
							<el-option v-for="item in option1_d" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="format">
						<span>专题版式</span>
						<el-select v-model="value2_d" placeholder="请选择" size="small" style="width:180px;">
							<el-option v-for="item in option2_d" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="btns">
						<button>添加文章到此专题</button>
						<button :class="{abled:multipleSelection3.length>0}">移出此专题</button>
					</div>
				</div>
			</div>
			<div class="table3">
				<el-table border ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange3" key="table3">
					<el-table-column type="selection" width="40">
					</el-table-column>
					<el-table-column label="标题">
						<template slot-scope="scope">{{ scope.row.title }}</template>
					</el-table-column>
					<el-table-column label="添加时间">
						<template slot-scope="scope">{{ scope.row.time }}</template>
					</el-table-column>					
				</el-table>
				<el-pagination style="margin-top:20px;" @size-change="handleSizeChange3" background @current-change="handleCurrentChange3" :current-page="page3" :page-sizes="[6,8,10]" :page-size="pageSize3" layout="total, sizes, prev, pager, next, jumper" :total="tableData3.length">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'special_topic',
		props: ['data'],
		data() {
			return {
				indexs: 0,
				activeName: '1',
				groupTab: 0,
				groupData: [{
					name: '体育',
					sum: 3
				}, {
					name: '娱乐',
					sum: 2
				}, {
					name: '科技',
					sum: 0
				}],
				groupIndex: 0,
				groupName: '体育',
				visible: false,
				visible_1: false,
				input1: '',
				input1_1: '',
				option1: [{
					value: '选项1',
					label: '排序1'
				}, {
					value: '选项2',
					label: '排序2'
				}, {
					value: '选项3',
					label: '排序3'
				}, {
					value: '选项4',
					label: '排序4'
				}],
				value1: '',
				option2: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				value2: '',
				allData: [{
					id: 1,
					name: '花费金额会费'
				}, {
					id: 2,
					name: '花费金额会费2'
				}, {
					id: 3,
					name: '花费金额会费3'
				}],
				noData: false,
				dataIndex: -1,
				input2: '',
				value3: '',
				option4: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				value4: '',
				option5: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				value5: '',
				loading1: false,
				imgUrl1: '',
				loading2: false,
				imgUrl2: '',
				textarea1: '',
				isRed1: false,
				isRed2: false,
				isRed3: false,
				isRed4: false,
				isRed5: false,
				isRed6: false,
				isRed7: false,
				dialogVisible1: false,
				isRed1_e: false,
				isRed2_e: false,
				isRed3_e: false,
				isRed4_e: false,
				isRed5_e: false,
				isRed6_e: false,
				isRed7_e: false,
				input2_e: '',
				value3_e: '',
				visible_1_e: false,
				input1_1_e: '',
				value4_e: '',
				option4_e: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				value5_e: '',
				option5_e: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				loading1_e: false,
				imgUrl1_e: '',
				loading2_e: false,
				imgUrl2_e: '',
				textarea1_e: '',
				activeName2: '1',
				tableData1: [{
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 26,
					stock: 27,
					sale: 11,
					day: 13
				}, {
					name: '王小虎',
					price: 27,
					stock: 28,
					sale: 12,
					day: 14
				}, {
					name: '王小虎',
					price: 20,
					stock: 20,
					sale: 5,
					day: 10
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}],
				multipleSelection1: [],
				page1: 1,
				pageSize1: 6,
				multipleSelection2: [],
				page2: 2,
				pageSize2: 6,
				tableData2: [{
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 26,
					stock: 27,
					sale: 11,
					day: 13
				}, {
					name: '王小虎',
					price: 27,
					stock: 28,
					sale: 12,
					day: 14
				}, {
					name: '王小虎',
					price: 20,
					stock: 20,
					sale: 5,
					day: 10
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}, {
					name: '王小虎',
					price: 25,
					stock: 26,
					sale: 10,
					day: 12
				}],
				option1_d: [{
					value: '选项1',
					label: '排序1'
				}, {
					value: '选项2',
					label: '排序2'
				}, {
					value: '选项3',
					label: '排序3'
				}, {
					value: '选项4',
					label: '排序4'
				}],
				value1_d: '',
				option2_d: [{
					value: '选项1',
					label: '版式1'
				}, {
					value: '选项2',
					label: '版式2'
				}, {
					value: '选项3',
					label: '版式3'
				}, {
					value: '选项4',
					label: '版式4'
				}],
				value2_d: '',
				tableData3: [{
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}, {
					title: '和飞机发生了解放了和丰富了呢辣椒粉和理解话费积分和就返回',
					time: '2018-05-25 12:05:25'
				}],
				multipleSelection3: [],
				page3: 1,
				pageSize3: 6,
			}
		},
		components: {

		},
		computed: {
			option3() {
				let arr = [];
				this.groupData.forEach((i, v) => {
					let obj = {};
					obj.value = i.name;
					obj.label = i.name;
					arr.push(obj);
				})
				return arr;
			},
			option3_e() {
				let arr = [];
				this.groupData.forEach((i, v) => {
					let obj = {};
					obj.value = i.name;
					obj.label = i.name;
					arr.push(obj);
				})
				return arr;
			},
		},
		watch: {
			input2: {
				handler(val) {
					if(val.length > 0) {
						this.isRed1 = false;
					}
				},
				deep: true
			},
			input2_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed1_e = false;
					}
				},
				deep: true
			},
			value3: {
				handler(val) {
					if(val.length > 0) {
						this.isRed2 = false;
					}
				},
				deep: true
			},
			value3_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed2_e = false;
					}
				},
				deep: true
			},
			value4: {
				handler(val) {
					if(val.length > 0) {
						this.isRed3 = false;
					}
				},
				deep: true
			},
			value4_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed3_e = false;
					}
				},
				deep: true
			},
			value5: {
				handler(val) {
					if(val.length > 0) {
						this.isRed4 = false;
					}
				},
				deep: true
			},
			value5_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed4_e = false;
					}
				},
				deep: true
			},
			imgUrl1: {
				handler(val) {
					if(val.length > 0) {
						this.isRed5 = false;
					}
				},
				deep: true
			},
			imgUrl1_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed5_e = false;
					}
				},
				deep: true
			},
			imgUrl2: {
				handler(val) {
					if(val.length > 0) {
						this.isRed6 = false;
					}
				},
				deep: true
			},
			imgUrl2_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed6_e = false;
					}
				},
				deep: true
			},
			textarea1: {
				handler(val) {
					if(val.length > 0) {
						this.isRed7 = false;
					}
				},
				deep: true
			},
			textarea1_e: {
				handler(val) {
					if(val.length > 0) {
						this.isRed7_e = false;
					}
				},
				deep: true
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			switchG(id) {
				this.groupTab = id;
			},
			selected(id, name) {
				this.groupIndex = id;
				this.groupName = name;
			},
			ensures() {
				if(this.input1.length > 0) {
					let obj = {};
					obj.name = this.input1;
					obj.sum = 0;
					this.groupData.push(obj);
					this.input1 = '';
				}
				this.visible = false;
			},
			ensures_1() {
				if(this.input1_1.length > 0) {
					let obj = {};
					obj.name = this.input1_1;
					obj.sum = 0;
					this.groupData.push(obj);
					this.input1_1 = '';
				}
				this.visible_1 = false;
			},
			ensures_1_e() {
				if(this.input1_1_e.length > 0) {
					let obj = {};
					obj.name = this.input1_1_e;
					obj.sum = 0;
					this.groupData.push(obj);
					this.input1_1_e = '';
				}
				this.visible_1_e = false;
			},
			overs(id) {
				this.dataIndex = id;
			},
			outs() {
				this.dataIndex = -1;
			},
			edit(id) {
				this.dialogVisible1 = true;
			},
			enter(id) {
				this.indexs = 1;
				this.goTop();
			},
			deletes(id) {
				let self = this;
				this.$confirm('是否确定删除', '提示', ).then(() => {
					self.allData.forEach((i, v) => {
						if(i.id === id) {
							self.$delete(this.allData, v);
							self.$message({
								type: 'success',
								message: '操作成功'
							});
						}
					})
				}).catch(() => {

				})
			},
			goUpload1() {
				document.getElementById("upfile1").click();
			},
			goUpload1_e() {
				document.getElementById("upfile1_e").click();
			},
			onFileChange1($event) {
				let self = this;
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length > 0) {
					this.loading1 = true;
				}
				fr.onload = function(evt) {
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN'), obj, true).then(res => {
						if(res.code === 200) {
							self.loading1 = false;
							self.imgUrl1 = res.data.fullpath;
						}
					})
				}
			},
			onFileChange1_e($event) {
				let self = this;
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length > 0) {
					this.loading1_e = true;
				}
				fr.onload = function(evt) {
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN'), obj, true).then(res => {
						if(res.code === 200) {
							self.loading1_e = false;
							self.imgUrl1_e = res.data.fullpath;
						}
					})
				}
			},
			goUpload2() {
				document.getElementById("upfile2").click();
			},
			goUpload2_e() {
				document.getElementById("upfile2_e").click();
			},
			onFileChange2($event) {
				let self = this;
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length > 0) {
					this.loading2 = true;
				}
				fr.onload = function(evt) {
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN'), obj, true).then(res => {
						if(res.code === 200) {
							self.loading2 = false;
							self.imgUrl2 = res.data.fullpath;
						}
					})
				}
			},
			onFileChange2_e($event) {
				let self = this;
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length > 0) {
					this.loading2_e = true;
				}
				fr.onload = function(evt) {
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN'), obj, true).then(res => {
						if(res.code === 200) {
							self.loading2_e = false;
							self.imgUrl2_e = res.data.fullpath;
						}
					})
				}
			},
			cancels() {
				this.activeName = '1';
				this.goTop();
			},
			cancels_e() {
				this.dialogVisible1 = false;
			},
			submits() {
				if(this.input2.length === 0) {
					this.isRed1 = true;
					this.goTop(100);
				}
				if(this.value3.length === 0) {
					this.isRed2 = true;
					this.goTop(100);
				}
				if(this.value4.length === 0) {
					this.isRed3 = true;
					this.goTop(100);
				}
				if(this.value5.length === 0) {
					this.isRed4 = true;
					this.goTop(100);
				}
				if(this.imgUrl1.length === 0) {
					this.isRed5 = true;
					this.goTop(150);
				}
				if(this.imgUrl2.length === 0) {
					this.isRed6 = true;
					this.goTop(450);
				}
				if(this.textarea1.length === 0) {
					this.isRed7 = true;
				}
				if(this.isRed1 || this.isRed2 || this.isRed3 || this.isRed4 || this.isRed5 || this.isRed6 || this.isRed7) {
					return;
				}
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
			},
			submits_e() {
				if(this.input2_e.length === 0) {
					this.isRed1_e = true;
				}
				if(this.value3_e.length === 0) {
					this.isRed2_e = true;
				}
				if(this.value4_e.length === 0) {
					this.isRed3_e = true;
				}
				if(this.value5_e.length === 0) {
					this.isRed4_e = true;
				}
				if(this.imgUrl1_e.length === 0) {
					this.isRed5_e = true;
				}
				if(this.imgUrl2_e.length === 0) {
					this.isRed6_e = true;
				}
				if(this.textarea1_e.length === 0) {
					this.isRed7_e = true;
				}
				if(this.isRed1_e || this.isRed2_e || this.isRed3_e || this.isRed4_e || this.isRed5_e || this.isRed6_e || this.isRed7_e) {
					return;
				}
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
			},
			handleSelectionChange1(val) {
				this.multipleSelection1 = val;
			},
			handleSizeChange1(val) {
				this.pageSize1 = val;
			},
			handleCurrentChange1(val) {
				this.page1 = val;
			},
			handleSelectionChange2(val) {
				this.multipleSelection2 = val;
			},
			handleSizeChange2(val) {
				this.pageSize2 = val;
			},
			handleCurrentChange2(val) {
				this.page2 = val;
			},
			handleSelectionChange3(val) {
				this.multipleSelection3 = val;
			},
			handleSizeChange3(val) {
				this.pageSize3 = val;
			},
			handleCurrentChange3(val) {
				this.page3 = val;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.special_topic {
		.reds {
			border: 1px solid #eb6877!important;
		}
		h1 {
			text-align: left;
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;
			border-bottom: 1px solid #cdcdcd;
		}
		.content {
			.groups {
				display: flex;
				padding: 20px;
				background: #f6f8f9;
				p {
					font-size: 14px;
					color: #a5a59a;
					margin-left: 22px;
					cursor: pointer;
				}
				.sel {
					color: #353535;
				}
			}
			.group_manage {
				.group_border {
					width: 90%;
					min-height: 800px;
					margin: 10px auto;
					border: 1px solid #e7e7eb;
					display: flex;
					text-align: left;
					padding-bottom: 50px;
					.border_left {
						width: 82%;
						border-right: 1px solid #e7e7eb;
						.advice {
							display: flex;
							align-items: center;
							padding: 12px 21px 10px 21px;
							background: #e0eaf6;
							img {
								width: 17px;
								height: 17px;
								margin-right: 5px;
							}
							span {
								font-size: 15px;
								color: #222;
							}
						}
						.group_name {
							padding: 0 21px;
							margin: 18px 0 14px 0;
							font-size: 15px;
							color: #222;
						}
						.set_selected {
							display: flex;
							padding: 0 21px;
							span {
								font-size: 15px;
								color: #222;
								margin-right: 8px;
							}
							.format {
								margin-left: 15px;
							}
						}
						.data_lists {
							display: flex;
							flex-wrap: wrap;
							.data_list {
								width: 42%;
								height: 220px;
								border-radius: 5px;
								box-shadow: 0 0 12px #e7e7eb;
								margin: 20px 0 0 5%;
								cursor: pointer;
								position: relative;
								.imgs {
									position: relative;
									display: flex;
									justify-content: center;
									margin: 12px auto;
									img {
										width: 90%;
										max-height: 170px;
									}
									p {
										width: 90%;
										position: absolute;
										left: 50%;
										bottom: 0;
										transform: translateX(-50%);
										font-size: 18px;
										color: #fff;
										padding: 2px 12px;
										background: #000;
										opacity: .5;
										z-index: 9;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
									}
								}
								.line {
									width: 90%;
									margin: 0 auto;
									height: 1px;
									background: #e4e8eb;
								}
								.hovers {
									position: absolute;
									left: 0;
									top: 0;
									width: 100%;
									height: 100%;
									background: rgba(0, 0, 0, .5);
									z-index: 99;
									display: flex;
									justify-content: center;
									align-items: center;
									.buttons {
										width: 100%;
										display: flex;
										justify-content: center;
										button {
											width: 58px;
											height: 30px;
											line-height: 30px;
											text-align: center;
											border-radius: 6px;
											font-size: 18px;
											color: #fff;
										}
										button:nth-of-type(1) {
											background: #3ca0ec;
										}
										button:nth-of-type(2) {
											background: #5fd312;
											margin: 0 26px;
										}
										button:nth-of-type(3) {
											background: #ec3c40;
										}
									}
								}
							}
							.no_datas {
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: center;
								img {
									width: 85px;
									height: 86px;
									margin: 100px 0 20px 0;
								}
								p {
									font-size: 14px;
									color: #999;
								}
							}
						}
					}
					.border_right {
						width: 18%;
						.grouping_list {
							text-align: left;
							p {
								font-size: 14px;
								color: #353535;
								cursor: pointer;
								padding: 11px 14px;
							}
							.sel {
								background: #f0f0f0;
							}
						}
					}
				}
			}
			.shelf {
				.btn {
					width: 90%;
					margin: 0 auto;
					background: #f4f5f9;
					text-align: left;
					padding: 10px;
					border-top: 1px solid #e7e8ec;
					display: flex;
					button {
						width: 110px;
						height: 40px;
						line-height: 40px;
						background: #e7e7eb;
						font-size: 16px;
						color: #b6acac;
						border: 1px solid #cbccd0;
						border-radius: 2px;
					}
					button:nth-of-type(2) {
						margin-left: 12px;
					}
					.sel {
						background: #3ca0ec;
						color: #fff;
					}
				}
				.table1 {
					width: 90%;
					padding: 0 0 50px 0;
					height: 550px;
					overflow: auto;
					margin: 0 auto;
				}
			}
		}
		.add_topic {
			padding: 30px 10%;
			.common {
				display: flex;
				align-items: center;
				margin-top: 26px;
				h5 {
					font-size: 14px;
					color: #233040;
					font-weight: 400;
					white-space: nowrap;
					margin-right: 25px;
				}
			}
			.btns {
				margin-top: 66px;
				display: flex;
				justify-content: center;
				button {
					height: 50px;
					line-height: 50px;
					text-align: center;
					border-radius: 6px;
					font-size: 16px;
				}
				button:nth-of-type(1) {
					width: 140px;
					background: #fff;
					color: #13a0ea;
					margin-right: 45px;
					box-shadow: 0px 0px 8px 6px rgba(0, 0, 0, 0.1);
				}
				button:nth-of-type(2) {
					width: 212px;
					background: #13a0ea;
					color: #fff;
				}
			}
			.covers,
			.banners {
				.up_img {
					width: 350px;
					height: 204px;
					border: 1px solid #d2d6df;
					display: flex;
					align-items: center;
					justify-content: center;
					.up_img_border {
						width: 92%;
						height: 88%;
						border: 2px dashed #d2d6df;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;
						cursor: pointer;
						position: relative;
						&:hover {
							border: 2px dashed #0099e9;
						}
						.no_up_img {
							width: 54px;
							height: 53px;
						}
						.have_up_img {
							width: 100%;
							max-height: 100%;
						}
						span {
							font-size: 14px;
							color: #0099e9;
							margin: 14px 0 8px 0;
						}
						p {
							font-size: 14px;
							color: #233040;
						}
					}
				}
				>span {
					align-self: flex-end;
					color: #65717f;
					margin: 0 0 18px 20px;
					white-space: nowrap;
				}
			}
			.banners {
				.up_img {
					width: 500px;
				}
			}
			>h6 {
				margin: 28px auto;
				font-size: 16px;
				color: #65717f;
				font-weight: 400;
			}
		}
		.topic_detail {
			.detail_name {
				text-align: left;
				padding: 38px 72px 28px 72px;
				border-bottom: 1px solid #cdcdcd;
				display: flex;
				align-items: center;
				justify-content: space-between;
				h2 {
					font-size: 34px;
					color: #000;
					font-weight: 500;
					span {
						font-size: 20px;
						color: #666;
						font-weight: 400;
					}
				}
				p {
					font-size: 20px;
					color: #3ca0ec;
					cursor: pointer;
					&:hover {
						text-decoration: underline;
					}
				}
			}
			.detail_conditions {
				margin: 24px auto 0 auto;
				padding: 8px 4% 20px 4%;
				border-bottom: 10px solid #f6f8f9;
				.group_name {
					text-align: left;
					color: #222;
				}
				.detail_condition {
					display: flex;
					justify-content: space-between;
					margin-top: 14px;
					.sort_way {
						span {
							margin-right: 12px;
						}
					}
					.format {
						span {
							margin-right: 12px;
						}
					}
					.btns {
						display: flex;
						button {
							height: 35px;
							line-height: 35px;
							font-size: 15px;
							color: #fff;
							border-radius: 2px;
							padding: 0 17px;
						}
						button:nth-of-type(1) {
							background: #5fd312;
						}
						button:nth-of-type(2) {
							background: #ec3c40;
							opacity: .3;
							margin-left: 5px;
						}
						.abled {
							opacity: 1!important;
						}
					}
				}
			}
			.table3{
				width: 94%;
				padding: 0 0 50px 0;
				height: 550px;
				overflow: auto;
				margin: 0 auto;
			}
		}
	}
</style>